<template>
	<view v-if="answers">
		<view class="music">
			<view id="progress">
				<view id="percent" :style="{'width': (100 * (current/duration)) + '%'}">
					
				</view>
			</view>
			<view id="button">
				<u-icon @click="pause()" color="#3d5cff" size="64" v-if="playing" name="pause-circle"></u-icon>
				<u-icon @click="play()" color="#3d5cff" size="64" v-else name="play-circle"></u-icon>
			</view>
		</view>
		<view class="content">
			<rich-text :nodes="question.content == undefined || question.content == null ? '' : question.content" :selectable="false" image-menu-prevent></rich-text>
		</view>
		<view class="answer" v-for="(item,index) in question.subQuestions" :key="index">
			<text id="title">{{index+1}}.</text>
			<view v-if="item.type == 0 && answers[item.questionId.toString()]">
				<single-choice :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]">
				</single-choice>
			</view>
			<view v-if="item.type == 1 && answers[item.questionId.toString()]">
				<multiple-choice :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]">
				</multiple-choice>
			</view>
			<view v-if="item.type == 2 && answers[item.questionId.toString()]">
				<judgement :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]"></judgement>
			</view>
			<view v-if="item.type == 3 && answers[item.questionId.toString()]">
				<completion :disabled="$props.disabled" :change="change" :question="item" :answer="answers[item.questionId.toString()]">
				</completion>
			</view>
		</view>
	</view>
</template>

<script>
	import SingleChoice from '../../templates/question/SingleChoice.vue';
	import MultipleChoice from '../../templates/question/MultipleChoice.vue';
	import Judgement from '../../templates/question/Judgement.vue';
	import Completion from '../../templates/question/Completion.vue';

	const ctx = uni.createInnerAudioContext();
	export default {
		name: 'listening',
		data() {
			return {
				duration: 1,
				current: 0,
				playing: false
			}
		},
		methods: {
			play: function() {
				if (this.$data.playing || this.$props.question.voiceFile == undefined || this.$props.question.voiceFile == null || this.$props.question.voiceFile == '') {
					return;
				}
				ctx.src = this.$props.question.voiceFile;
				ctx.startTime = this.$data.current;
				this.$data.playing = true;
				ctx.autoplay = false;
				ctx.onTimeUpdate(() => {
					this.$data.current = ctx.currentTime;
					this.$data.duration = ctx.duration;
				});
				ctx.onPlay(() => {
					this.$data.current = ctx.currentTime;
					this.$data.duration = ctx.duration;
				})
				ctx.play();
			},
			pause: function() {
				if (!this.$data.playing) {
					return;
				}
				this.$data.playing = false;
				ctx.pause();
			}
		},
		components: {
			SingleChoice,
			MultipleChoice,
			Judgement,
			Completion
		},
		props: {
			question: {
				type: Object,
				value: {}
			},
			answers: {
				type: Object,
				value: {}
			},
			change: {
				type: Function,
				value: function(questionId) {}
			},
			disabled: {
				type: Boolean,
				value: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.music {
		width: 710rpx;
		height: 84rpx;
		margin: 12rpx 20rpx;
		display: flex;
		flex-direction: row;
		
		#progress {
			width: 600rpx;
			height: 24rpx;
			margin: 24rpx;
			background: rgba(244, 243, 253, 1);
			
			#percent {
				height: 100%;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 81, 6, 1) 100%);
			}
		}

		#button {
			margin-top: 4rpx;
		}
	}

	.content {
		width: 710rpx;
		margin: 12rpx 20rpx;
		font-size: 36rpx;
	}

	.answer {
		width: 710rpx;
		margin: 12rpx 20rpx;

		#title {
			color: $secondary-color;
		}

		#textarea {
			margin: 6rpx 0 24rpx;
		}
	}
</style>
